﻿@resource TeamBuildScreen.Server.Resources.IndexViewModelDto

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
	<head>
        <title>Team Build Screen</title>
		<link type="text/css" href="/content/jquery.ui.all.css" rel="stylesheet" />
		<script src="/content/raphael-min.js"></script>
		<script src="/content/jquery-1.5.min.js"></script>
		<script src="/content/jquery-ui.min.js"></script>
		<script src="/content/jquery.uniform.min.js"></script>
		<script src="/content/tbs.core.js"></script>
		<script src="/content/tbs.buildgrid.js"></script>
		<script>
		var configButton = function(id, onClick) {
			this.init(id, onClick);
		};
		configButton.prototype.init = function(id, onClick) {
			var paper = Raphael(id, 48, 48);

			var icon = paper.path("M17.41,20.395l-0.778-2.723c0.228-0.2,0.442-0.414,0.644-0.643l2.721,0.778c0.287-0.418,0.534-0.862,0.755-1.323l-2.025-1.96c0.097-0.288,0.181-0.581,0.241-0.883l2.729-0.684c0.02-0.252,0.039-0.505,0.039-0.763s-0.02-0.51-0.039-0.762l-2.729-0.684c-0.061-0.302-0.145-0.595-0.241-0.883l2.026-1.96c-0.222-0.46-0.469-0.905-0.756-1.323l-2.721,0.777c-0.201-0.228-0.416-0.442-0.644-0.643l0.778-2.722c-0.418-0.286-0.863-0.534-1.324-0.755l-1.96,2.026c-0.287-0.097-0.581-0.18-0.883-0.241l-0.683-2.73c-0.253-0.019-0.505-0.039-0.763-0.039s-0.51,0.02-0.762,0.039l-0.684,2.73c-0.302,0.061-0.595,0.144-0.883,0.241l-1.96-2.026C7.048,3.463,6.604,3.71,6.186,3.997l0.778,2.722C6.736,6.919,6.521,7.134,6.321,7.361L3.599,6.583C3.312,7.001,3.065,7.446,2.844,7.907l2.026,1.96c-0.096,0.288-0.18,0.581-0.241,0.883l-2.73,0.684c-0.019,0.252-0.039,0.505-0.039,0.762s0.02,0.51,0.039,0.763l2.73,0.684c0.061,0.302,0.145,0.595,0.241,0.883l-2.026,1.96c0.221,0.46,0.468,0.905,0.755,1.323l2.722-0.778c0.2,0.229,0.415,0.442,0.643,0.643l-0.778,2.723c0.418,0.286,0.863,0.533,1.323,0.755l1.96-2.026c0.288,0.097,0.581,0.181,0.883,0.241l0.684,2.729c0.252,0.02,0.505,0.039,0.763,0.039s0.51-0.02,0.763-0.039l0.683-2.729c0.302-0.061,0.596-0.145,0.883-0.241l1.96,2.026C16.547,20.928,16.992,20.681,17.41,20.395zM11.798,15.594c-1.877,0-3.399-1.522-3.399-3.399s1.522-3.398,3.399-3.398s3.398,1.521,3.398,3.398S13.675,15.594,11.798,15.594zM27.29,22.699c0.019-0.547-0.06-1.104-0.23-1.654l1.244-1.773c-0.188-0.35-0.4-0.682-0.641-0.984l-2.122,0.445c-0.428-0.364-0.915-0.648-1.436-0.851l-0.611-2.079c-0.386-0.068-0.777-0.105-1.173-0.106l-0.974,1.936c-0.279,0.054-0.558,0.128-0.832,0.233c-0.257,0.098-0.497,0.22-0.727,0.353L17.782,17.4c-0.297,0.262-0.568,0.545-0.813,0.852l0.907,1.968c-0.259,0.495-0.437,1.028-0.519,1.585l-1.891,1.06c0.019,0.388,0.076,0.776,0.164,1.165l2.104,0.519c0.231,0.524,0.541,0.993,0.916,1.393l-0.352,2.138c0.32,0.23,0.66,0.428,1.013,0.6l1.715-1.32c0.536,0.141,1.097,0.195,1.662,0.15l1.452,1.607c0.2-0.057,0.399-0.118,0.596-0.193c0.175-0.066,0.34-0.144,0.505-0.223l0.037-2.165c0.455-0.339,0.843-0.747,1.152-1.206l2.161-0.134c0.152-0.359,0.279-0.732,0.368-1.115L27.29,22.699zM23.127,24.706c-1.201,0.458-2.545-0.144-3.004-1.345s0.143-2.546,1.344-3.005c1.201-0.458,2.547,0.144,3.006,1.345C24.931,22.902,24.328,24.247,23.127,24.706z").attr({fill : "#FFFFFF", stroke : "#FFFFFF", "stroke-opacity" : 0, "stroke-width" : 4});
			icon.scale(1.5,1.5,0,0);

			icon.hover(function () {
                			icon.stop().animate({"stroke-opacity": 0.4}, 200);
            			}, function () {
                			icon.stop().animate({"stroke-opacity": 0}, 200);
			});

			icon.node.onclick = onClick;
		}

		$(document).ready(function() {
            var builds = @(new HtmlString(Resource.BuildData));
            var interval = @Resource.Settings.UpdateInterval;
            var columns = @Resource.Settings.Columns;
            var messageView = new TeamBuildScreen.MessageView("overlay");
            var buildServer = new TeamBuildScreen.BuildServer(builds, interval, messageView);
			var grid = new TeamBuildScreen.BuildGrid("canvas", buildServer, columns);
			var windowResizeThread;

			$(window).resize(function() {
				var resizeComplete = function() {
					grid.resize();
				}

				clearTimeout(windowResizeThread);
				windowResizeThread = setTimeout(resizeComplete, 100);
			});

			var mouseMoveThread;

            var showToolbar = function() {
				var hideToolbar = function() {
					$("#toolbar").stop().animate({"height" : "0px"}, 1000);
				};

				var height = $("#toolbar").css("height");

				if (height === "0px") {
					$("#toolbar").stop().animate({"height" : "60px"}, 1000, function() {
						clearTimeout(mouseMoveThread);
						mouseMoveThread = setTimeout(hideToolbar, 1500);
					});
				} else {
					clearTimeout(mouseMoveThread);
					mouseMoveThread = setTimeout(hideToolbar, 1500);
				}
			}

			$("#overlay").bind('mousemove', showToolbar);

			$('#dialog').dialog({
				autoOpen: false,
				width: 600,
				buttons: {
					"Save": function() {
						messageView.hide();
						$(this).dialog("close");
			            $("#overlay").bind('mousemove', showToolbar);
                        buildServer.start();
					}, 
					"Close": function() {
						messageView.hide();
						$(this).dialog("close");
			            $("#overlay").bind('mousemove', showToolbar);
                        buildServer.start();
					}
				}
			});

			$("input:file, input:checkbox, input:radio, select").uniform();

			new configButton("config-button", function() {
                $("#overlay").unbind('mousemove');
                buildServer.stop();
				messageView.show();
				$('#dialog').dialog('open');
			});

			//$('#dialog').dialog('open');

			$(".ui-build").hover(function() {
				$(this).removeClass("ui-state-default");
				$(this).addClass("ui-state-active");
			},
			function() {
				$(this).addClass("ui-state-default");
				$(this).removeClass("ui-state-active");
			});
		});
		</script>
		<style type="text/css">
		#canvas
		{
			background-color : #333333;
			position : absolute;
			top : 0;
			left : 0;
		}

		#overlay
		{
			background-color : #000000;
			position : absolute;
			top : 0;
			left : 0;
			width : 100%;
			height : 100%;
		}
		
		#overlay span
		{
			width : 100%;
		    height : 24px;
		    position : absolute;
		    top : 50%;
		    margin-top : -12px;
			text-align : center;
			color : White;
			font-family : "Segoe UI";
			font-size : 24px;
		}

		#toolbar
		{
			position : absolute;
			bottom : 0px;
			left : 0;
			width : 100%;
			height : 0px;
			overflow : hidden;
			/* Fallback for web browsers that doesn't support RGBa */
			/*background: rgb(0, 0, 0);*/
			/* for webkit browsers */
			background : -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.0)), to(rgba(0, 0, 0, 0.75)));
			/* for firefox 3.6+ */
			background : -moz-linear-gradient(top center,  rgba(0, 0, 0, 0.0),  rgba(0, 0, 0, 0.75));
			/* for IE 5.5 - 7 */
			filter : progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#C0000000, GradientType=0);
			/* for IE 8 */
			-ms-filter : progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#C0000000, GradientType=0);
		}

		#config-button
		{
			width : 48px;
			height : 48px;
			position : relative;
			top : 6px;
			left : 6px;
			cursor : pointer;
		}

		/*demo page css*/
		body
		{
			font: 65% "Trebuchet MS", sans-serif;
			margin: 50px;
			background-color: #333333;	
			overflow : hidden;
		}
		form input, div.selector { float: right; width: 60%; }
		/*form label { float: left; display: block; margin: 7px 0px 7px 0px; width: 38% }*/
		form textarea { width: 100%; height: 70px; }
		</style>
	</head>
	<body style="margin : 0">
		<div id="canvas"></div>
		<div id="overlay">
            <span></span>
        </div>
		<div id="toolbar">
			<div id="config-button"></div>
		</div>
		<div id="dialog" title="Team Build Screen Settings"> 
			<div id="accordion"> 
				<form action="">
					<div>
						<label>Server:</label><input type="text">
					</div>
					<h3>Builds</h3>
					<div class="ui-widget ui-widget-content ui-corner-all" style="padding-left : 3px; padding-right : 3px; padding-top : 3px;">
						<div class="ui-build ui-state-default" style="padding : 3px; margin-bottom : 3px; border-bottom: 1px solid #c1c1c1;">
							<input id="1" type="checkbox"/>
							<label for="1">Team Project: My First Build</label>
						</div>
						<div class="ui-build ui-state-default" style="padding : 3px; margin-bottom : 3px; border-bottom: 1px solid #c1c1c1;">
							<input id="2" type="checkbox"/>
							<label for="2">Team Project: My Second Build</label>
						</div>
						<div class="ui-build ui-state-default" style="padding : 3px; margin-bottom : 3px; border-bottom: 1px solid #c1c1c1;">
							<input id="3" type="checkbox"/>
							<label for="3">Team Project: My Third Build</label>
						</div>
						<div class="ui-build ui-state-default" style="padding : 3px; margin-bottom : 3px; border-bottom: 1px solid #c1c1c1;">
							<input id="4" type="checkbox"/>
							<label for="4">Team Project: My Fourth Build</label>
						</div>
						<div class="ui-build ui-state-default" style="padding : 3px; margin-bottom : 3px; border-bottom: 1px solid #c1c1c1;">
							<input id="5" type="checkbox"/>
							<label for="5">Team Project: My Fifth Build</label>
						</div>
					</div>
					<fieldset>
						<legend>Display</legend>
						<label>Columns:</label>
						<select style="opacity: 0;">
							<option>1</option>
							<option>2</option>
							<option>3</option>
							<option>4</option>
							<option>5</option>
						</select>
						<label>Refresh Every:</label>
						<select>
							<option>15 seconds</option>
							<option>30 seconds</option>
							<option>45 seconds</option>
							<option>60 seconds</option>
						</select>
						<label>Fade Build Panels After:</label>
						<select>
							<option>1 day</option>
							<option>2 days</option>
							<option>5 days</option>
							<option>1 week</option>
							<option>1 month</option>
						</select>
					</fieldset>
				</form> 
			</div> 
		</div>
	</body>
</html>